<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import { List as vanList ,Cell as vanCell} from 'vant';
//引入路由
import { useRouter } from 'vue-router'

const datalist = ref([])
const loading = ref(false);
const finished = ref(false);
const pageNo = ref(0)
const total = ref(0)
const firstLoad = ref(true)


const onLoad = async () => {
  if (!firstLoad.value && total.value === datalist.value.length){
    finished.value = true
    return
  }
  firstLoad.value = false
  console.log("load data")
  pageNo.value ++
  const getData = await axios({
    url: `https://m.maizuo.com/gateway?cityId=610100&pageNum=${pageNo.value}&pageSize=10&type=1&k=9632889`,
    headers: {
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1700982879663830145269761"}',
      'X-Host': 'mall.film-ticket.film.list'
    }
  });
  datalist.value = [...datalist.value,...getData.data.data.films]
  total.value = getData.data.data.total

  loading.value = false
}

onMounted(onLoad)

//定义路由
const router = useRouter()
const handleClick= (id)=> {
  router.push(`detail/${id}`)
}
</script>

<template>
  <div>
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad" :immediate-check="false" offset="10">
      <van-cell class="van-cell_value" v-for="item in datalist" :key="item.filmId"
                @click="handleClick(item.filmId)">
        <img :src="item.poster" alt="" style="width:100px;float: left"/>
        <div>{{item.name}}</div>
      </van-cell>
    </van-list>

  </div>
</template>

<style scoped lang="scss">
:deep(.van-cell__value){
  text-align: left;
}
</style>